$(function() {
	if(typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    }else{
        console.log("您的浏览器支持WebSocket");
        
      	// 实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        var socketUrl= basePath + "/im/" + userId;
		socketUrl = socketUrl.replace("https", "ws").replace("http", "ws");
		console.log(socketUrl)
		var socket = new WebSocket(socketUrl);
		//打开事件
		socket.onopen = function() {
			console.log("websocket已打开");
			//socket.send("这是来自客户端的消息" + location.href + new Date());
		};
		//获得消息事件
		socket.onmessage = function(msg) {
			console.log("获取消息：" + msg.data);
			var obj = JSON.parse(msg.data);
			//发现消息进入    开始处理前端触发逻辑
			if(obj.code == 0){
				console.log(obj.content)
				if(obj.content != null && obj.content != undefined && obj.content != ""){
					receiveMsg(obj.content, obj.friendId);
				}
			}
			if (obj.code == 100 || obj.code == 300){ //好友上下线更新
				//$("#" + obj.userId + " span").css("background-color", '#c2c2c2')
				$.ajax({
					type: "get",
					url: basePath + "/sys/findUserList",
					data: {'userId':userId},
					success: function(data) {
						console.log(data);
						//加载用户
						$(".ul_2").html(""); //初始清空原来留在那里让w3c通过的
						for(i = 0; i < data.userList.length; i++) {
							var imgurl = basePath + "/static/socket/user_img/qq0.jpg";
							dandan.newuser('.ul_2', Array(data.userList[i].name, imgurl), 
									data.userList[i].id, data.userList[i].status); //在线好友
							$arr_user[data.userList[i].id] = Array(data.userList[i].name,imgurl); //好友数组
						}
						//console.log($arr_user); //用户数组
					}
				});
			}
			if (obj.code == -100){
				$("#ul_id").append("<li>"+ obj.msg +"</li>")
			}
		};
		//关闭事件
		socket.onclose = function() {
			let dayTime = new Date().toLocaleTimeString('chinese', {hour12:false});
			console.log("websocket已关闭 -->" + dayTime);
		};
		//发生了错误事件
		socket.onerror = function() {
			console.log("websocket发生了错误");
		}
	}

	function uptUserList(){
		
	}
	
	/*
	网站：www.seejoke.com
	email:admin@seejoke.com
	*/
	window['dandan'] = {}
	var ing_user; //当前用户
	//浏览器
	function liulanqi() {
		var h = $(window).height();
		var w = $(window).width();
		$("#top").width(w);
		$("#foot").html(h);

		$(".box").height(h - 135);
		$("#mid_con").height(h - 255);
		$(".right_box").height(h - 134);
		$("#mid_say textarea").width(w - 480);

		if($(".box").height() < 350) {
			$(".box").height(350)
		}
		if($("#mid_con").height() < 230) {
			$("#mid_con").height(230)
		}
		if($(".right_box").height() < 351) {
			$(".right_box").height(351)
		}
		if($("#mid_say textarea").width() < 320) {
			$("#mid_say textarea").width(320)
		}

		/*	 if($("#mid_foot").width()<400){
				 $("#mid_foot").width(400)
				 }  */

		if(w <= 800) {
			$("#top").width(800);
			$("#body").width(800)
		} else {
			$("#body").css("width", "100%")
		}
		//$("#top").html(b_h);

		$(".my_show").height($("#mid_con").height() - 30); //显示的内容的高度出现滚动条
		//$(".my_show").scrollTop($(".con_box").height()-$(".my_show").height());//让滚动滚到最底端.在这里不加这句了，没多用，可能还卡

		//右边的高度
		r_h = $(".right_box").height() - 40 * 3;
		$("#right_top").height(r_h * 0.3)
		$("#right_mid").height(r_h * 0.4)
		$("#right_foot").height(r_h * 0.3)
	}
	window['dandan']['liulanqi'] = liulanqi;
	window['dandan']['mytime'] = mytime;
	window['dandan']['kongge'] = kongge;
	
	//触发浏览器   
	$(window).scroll(function() {
		dandan.liulanqi();
	}); //滚动触发
	$(window).resize(function() {
		dandan.liulanqi();
		return false;
	}); //窗口触发
	//alert("??????")
	dandan.liulanqi();
	
	//显示个数
	function user_geshu() {
		var length1 = $(".ul_1 > li").length;
		var length2 = $(".ul_2 > li").length;
		var length3 = $(".ul_3 > li").length;
		
		$(".n_geshu_1").text(length1);
		$(".n_geshu_2").text(length2);
		$(".n_geshu_3").text(length3);
	}
	user_geshu()
	//alert(length1)

	//点击展开会员
	$(".h3").click(function() {
		$(this).toggleClass("click_h3").next(".ul").toggle(600);
	});
	
	//alert($admin_name);
	$("#right_foot").html('<p><img src="/static/socket/images/Aimg.png" alt="头象" style="border-radius: 50%;" /></p>' + username);

	/****************************** Controller *************************************/
	var title_ = "title_";  //聊天窗口标识
	var leave_ = "leave_";  //离线好友标识
	var ing_ = "ing_";
	var msgcon_ = "msgcon_";

	//我的好友列表(在登录成功后-渲染列表)
	//最近聊天列表(发送接收消息时创建)
	//参数说明(class标识, Array(name,imgurl), userId)
	function newuser($this, arr, id, status) {
		let name = arr[0];
		let img = arr[1];
		//最近聊天列表
		if($this == '.ul_1'){
			$($this).prepend('<li id="' + ing_ + id + '">' + name + '</li>');
			$('#' + ing_ + id).click(function() {
				openChatTitle(title_ + id, name, img);
			}); //给按钮加事件
			hover_user('#' + ing_ + id); //给经过触发
		}
		//创建在线好友列表
		if($this == '.ul_2'){
			if(status == 1){
				$($this).append('<li id="' + id + '"><span class="layui-badge-dot" style="position: relative;margin-right: 5px;"></span>' + name + '</li>');
			}else{
				$($this).append('<li id="' + id + '"><span class="layui-badge-dot" style="position: relative;margin-right: 5px;background-color: #c2c2c2;"></span>' + name + '</li>');
			}
			$('#' + id).click(function() { //好友点击事件、点击打开聊天窗口
				openChatTitle(title_ + id, name, img, id);
			}); //给按钮加事件
			hover_user('#' + id); //给经过触发
		}
		//创建离线好友列表
		if($this == '.ul_3'){
			$($this).append('<li id="' + leave_ + id + '">' + name + '</li>');
			hover_user('#' + leave_ + id);	
		}
		user_geshu(); //更新人数
	}
	
	window['dandan']['newuser'] = newuser;

	////更新最近聊天的位置
	function ing_my_user($this, arr, ing_id) { //ing_id 为聊天对象id
		let ing_userId = ing_ + ing_id;
		$("#" + ing_userId).remove();
		$($this).prepend('<li id="' + ing_userId + '">' + arr[0] + '</li>');
		$('#' + ing_userId).click(function() {
			openChatTitle(title_ + ing_id, arr[0], arr[1]);
		}); //给按钮加事件
		hover_user('#' + ing_userId); //给经过触发	
	}

	//打开聊天窗口-标题栏和主控制（点击好友-创建聊天tab框）
	//参数说明(title_userId, name, imgurl, 好友Id)
	function openChatTitle(user_id, name, img, ing_id) {
		console.log("窗口=>" + user_id + "--" + name)
		
		if($("#" + user_id).length < 1) {
			$("#mid_top").append('<div id="' + user_id + '" class="list"><table border="0" cellspacing="0" cellpadding="0"><tr><td id="zi' 
					+ user_id + '" class="td_user td_user_click">' + name + '</td><td id="zino' + user_id + '" class="td_hide td_hide_click">X</td></tr></table></div>');

			//加载缓存信息
			$.ajax({
				type: "get",
				url: basePath + "/chat/getMsgs",
				data: {'userId':userId, 'friendId':ing_id},
				success: function(data) {
					//console.log(data);
					for(i = 0; i < data.list.length; i++) {
						let msg = data.list[i];
						let msgconid = msgcon_ + title_ + msg.friendId;
						if(msg.type == 1){
							uptRightMsg(msgconid, msg.createrTime, msg.friendName, msg.content);
						}
						if(msg.type == 0){
							uptLeftMsg(msgconid, msg.createrTime, msg.friendName, msg.content);
						}
					}
				}
			});
			
			//创建完成后给事件
			//alert('#'+id)
			$('#' + user_id).click(function() {
				openChatTitle(user_id, name, img);
			}); //给按钮加事件
			//关闭
			$("#zino" + user_id).click(function() {
				delete_user(user_id, name, img);
				return false
			}); //关闭打开的
			
		} else {
			$("#zino" + user_id).addClass("td_hide_click"); //给自己加样式
			$("#zi" + user_id).addClass("td_user_click"); //给自己加样式
		}
		my_siblings("#" + user_id); //去掉兄弟样式

		//创建内容框
		my_user_con(name, user_id);

		//创建头像
		my_user_head(name, user_id, img);

		ing_user = user_id; //更新当前聊天用户
		//$("#right_mid").html(""); //清空右边的内容
	}
	//关闭打开的窗口
	function delete_user(id, user, img) {
		if(ing_user == id) {
			layer.confirm('你确定要关闭 ' + user + ' 聊天窗口吗？',{
				btn: ['确定', '取消'],title:"系统提示"}, function(index){
				
				$("#" + id).remove(); //栏目栏目
				$("#" + msgcon_ + id).remove(); //删除内容
				$(".head" + id).remove(); //删除头像
				//alert($(".list").length);//还有几个栏目
				if($(".list").length > 0) {
					var eq = $(".list").length - 1;
					//alert($(".list:eq("+eq+")").attr("id"));
					var old_id = $(".list:eq(" + eq + ")").attr("id");
					sibli_hide(".head" + old_id); //显示最后一个的头像
					sibli_hide("#user_con" + old_id); //显示最后一个的内容
					$("#zino" + old_id).addClass("td_hide_click"); //给最后一个加样式
					$("#zi" + old_id).addClass("td_user_click"); //给最后一个加样式
					ing_user = old_id; //给聊天框定位
				} else {
					//alert("已经全部删除");
					$(".dandan_liaotian").show(500)
				};
				layer.close(index);
			});
		} else {
			openChatTitle(id, user, img);
		}
	}
	
	function uptLeftMsg($this, time, name, content){
		$("#"+ $this).append("<div style='text-align: center;color:#CCCCCC'>"+time+"</div>");
		$("#"+ $this).append('<div class="my_say_con"><font color=\"#0000FF\">' + name
			+ "</font><p><font color=\"#333333\">" + content + '</font></p></div>');
	}
	function uptRightMsg($this, time, name, content){
		$("#"+ $this).append("<div style='text-align: center;color:#CCCCCC'>"+time+"</div>");
		$("#"+ $this).append('<div class="my_say_con"><font color=\"#0000FF\" class="rig_name">' + name
			+ "</font><p><font color=\"#333333\" class='rig_msg'>" + content + '</font></p></div>');
	}
	
	//创建内容框(name, 好友Id)
	function my_user_con(name, ing_id) {
		if($("#" + msgcon_ + ing_id).length < 1) {
			$(".con_box").append('<div id="' + msgcon_ + ing_id + '"></div>');
			$("#" + msgcon_ + ing_id).hide(); //默认隐藏，增加效果
		}
		sibli_hide("#" + msgcon_ + ing_id); //隐藏兄弟
	}
	//隐藏兄弟头像
	function sibli_hide($this) {
		$($this).show(500, function() {
			$(".my_show").scrollTop($(".con_box").height() - $(".my_show").height()); /*让滚动滚到最底端*/
		}).siblings().hide(500); //隐藏其他兄弟
	}

	//接收消息处理
	function receiveMsg(receiveText, fromUserId){
		var t = new Date().toLocaleTimeString('chinese', {hour12:false}); //当前时间
		let friendName = $arr_user[fromUserId][0];
		let friendImg = $arr_user[fromUserId][1];
		
		console.log("来自<"+ friendName +">的消息," + fromUserId);
		
		//检查是否存在聊天框
		let msgconid = msgcon_ + title_ + fromUserId;
		if(fromUserId != undefined && $("#"+ msgconid).length > 0){
			//console.log("长度=>" + $("#"+ing_user).length);
			//var ing_id = ing_user.substring(6, ing_user.length); //聊天对象userId
		}else{
			openChatTitle(title_ + fromUserId, friendName, friendImg); //打开新窗口
		}
		
		$("#"+ msgconid).append("<div style='text-align: center;color:#CCCCCC'>"+t+"</div>");
		$("#"+ msgconid).append('<div class="my_say_con"><font color=\"#0000FF\">' + friendName
			+ "</font><p><font color=\"#333333\">" + trim2(trim(receiveText)) + '</font></p></div>');
		
		if($("#" + ing_ + fromUserId).length > 0) { //创建最近聊天人
			ing_my_user('.ul_1', $arr_user[fromUserId], fromUserId); //更新最近聊天的位置   
		} else {
			dandan.newuser('.ul_1', $arr_user[fromUserId], fromUserId); //创建最近聊天
		}
		
		$("#texterea").focus(); //光标焦点
	}
	
	//发送后调用此方法
	function saysayMsg() {
		if($(".list").length < 1) {
			alert("你还没选中跟哪个聊天，请点左边好友选中一个再聊");
			return false;
		}

		var t = new Date().toLocaleTimeString('chinese', {hour12:false}); //当前时间
		if($("#texterea").val()) {
			console.log("ing_user=" + ing_user);
			//console.log("username=" + username);
			$("#"+ msgcon_ + ing_user).append("<div style='text-align: center;color:#CCCCCC'>"+t+"</div>");
			$("#"+ msgcon_ + ing_user).append('<div class="my_say_con"><font color=\"#0000FF\" class="rig_name">' + username
				+ "</font><p><font color=\"#333333\" class='rig_msg'>" + trim2(trim($("#texterea").val())) + '</font></p></div>');
			//$("#right_mid").html($("#texterea").val()); //右边显示刚发送的文字
			var friendId = ing_user.substring(6, ing_user.length); //聊天对象id
			console.log("聊天对象Id:" + friendId);
			
			if(socket == null){
				alert("服务关闭了")
			}
			var param = {};
			param["friendId"] = friendId;
			param["friendName"] = $arr_user[friendId][0];
			param["myName"] = username;
			param["content"] = $("#texterea").val();
			var params = JSON.stringify(param);
			console.log("发送：" + params);
			socket.send(params);
			
			$("#texterea").val("");
			$(".my_show").scrollTop($(".con_box").height() - $(".my_show").height()); //让滚动滚到最底端
			//alert($(".con_box").height());
			//alert($("#user_con"+ing_user+" > .my_say_con").length);//聊天记录的个数
			
			if($("#" + ing_ + friendId).length > 0) {
				console.log("更新最近聊天->" + $("#" + ing_ + friendId).length);
				ing_my_user('.ul_1', $arr_user[friendId], friendId); //更新最近聊天的位置   
			} else {
				console.log("创建最近聊天->" + $("#" + ing_ + friendId).length);
				dandan.newuser('.ul_1', $arr_user[friendId],  friendId); //创建最近聊天
			}
		} else {
			alert("你输入的内容为空")
		}
		$("#texterea").focus(); //光标焦点
	}
	
	//去掉兄弟的样式
	function my_siblings($this) {
		$($this).siblings().children().children().children().children().removeClass("td_hide_click td_user_click");
	}

	//创建右边的头像
	function my_user_head(user, id, img) {
		if($(".head" + id).length < 1) {
			if(!img) { //头像为空的时候
				img = ctxStatic + "/socket/user_img/qq1.jpg";
			}
			$("#right_top").append('<div class="head' + id + '"><p><img src="' + img + '" alt="' 
					+ "头像" + '" style="width:82px;height:81px;" /></p>' + user + '<div>');
			$(".head" + id).hide(); //默认是隐藏，让它有一点效果
		}
		sibli_hide(".head" + id);
	}

	

	//欢迎
	if(username == null || username == ''){
		$("#top").html('<br />&nbsp;&nbsp;' + dandan.mytime() + ',欢迎你的到来！！');
	}else{
		$("#top").html('<br />&nbsp;&nbsp;' + dandan.mytime() + ', ' + username + ', 欢迎进入聊天室！');
	}
		
	//鼠标经过会员的时候
	function hover_user($this) {
		$($this).hover(
			function() {
				$(this).addClass("hover");
			},
			function() {
				$(this).removeClass("hover");
			}
		);
	}

	//经过输入文本框的时候
	$("#texterea").hover(
		function() {
			$(this).addClass("textarea2");
		},
		function() {
			$(this).removeClass("textarea2");
		}
	);
	//过滤所有的空格
	function kongge(content) {
		return content.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
	}
	
	// 回车监听
	$("body").bind('keyup', function(event) {
		if(event.ctrlKey && event.keyCode == 13) { //ctrl+回车
			saysayMsg(); //发送消息
		}
		if(!event.ctrlKey && event.keyCode == 13) { //回车
			myenter();
		}
	});
	//发送按钮 
	$("#mid_sand").click(function() {
		saysayMsg();
	})

	//替换所有的回车换行   
	function trim2(content) {
		var string = content;
		try {
			string = string.replace(/\r\n/g, "<br />")
			string = string.replace(/\n/g, "<br />");
		} catch(e) {
			alert(e.message);
		}
		return string;
	}
	//替换所有的空格
	function trim(content) {
		var string = content;
		try {
			string = string.replace(/ /g, "&nbsp;")
		} catch(e) {
			alert(e.message);
		}
		return string;
	}

	//时间
	function mytime() {
		var now = (new Date()).getHours();
		if(now > 0 && now <= 6) {
			return "午夜好";
		} else if(now > 6 && now <= 11) {
			return "早上好";
		} else if(now > 11 && now <= 14) {
			return "中午好";
		} else if(now > 14 && now <= 18) {
			return "下午好";
		} else {
			return "晚上好";
		}
	}
	
	function myenter() {
		//回车键的时候换行，留以后可以有用
	}
})